<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus事件和blur事件</title>
    <style>
        .slide_p {
            border-radius: 3px;
            border: 1px black solid;
            background-color: #7EC0EE;
            color: white;
            margin: 3px;
            padding: 0;
            
        }
        a{
            text-decoration: none;
            color: white;
        }
    </style>
    <script src="jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.js"></script>
    <script>
        $(function (){
            //获得焦点颜色为灰色
            $("#username,#email").focus(function () {
                $(this).css("background-color", "#B0E2FF");
            });
            //失去焦点颜色为白色,同时判空
            $("#username,#email").blur(function () {
                $(this).css("background-color", "white");
                // console.log($(this).val());
                if (!$(this).val()) alert('不能为空', '警告');
            });
            $("#hide_text").click(function () {
                /*元素显示与隐藏*/
                // $(selector).hide(speed,callback);
                // $("input").hide(1000);
                // 使用toggle()方法来切换hide()和show()方法，显示被隐藏的元素，并隐藏已显示的元素，
                $("input").toggle(1000);
            });
            $("#fade_text").click(function () {
                // $("p").fadeToggle(1000);
                $("#speed_01").fadeToggle(3000);
                $("#speed_02").fadeToggle(2000);
                $("#speed_03").fadeToggle(1000);
            });
            $("#slide_text").click(function () {
                $("#slide_div").slideToggle(500);
            });
        });
    </script>
</head>

<body style="text-align: center;">
    <form action="" method="post">
        name:
        <input type="text" name="username" id="username"><br><br>
        email:
        <input type="text" name="email" id="email"><br><br>
        <input type="submit" value="提交">
    </form>
    <button id="hide_text">隐藏\显示输入框</button>
    <p id="speed_01">淡入/淡出效果fadeIn()、fadeOut()、fadeToggle()</p>
    <p id="speed_02">淡入/淡出效果</p>
    <p id="speed_03">淡入/淡出效果</p>
    <button id="fade_text">淡入/淡出效果</button>
<button id="slide_text">滑动效果</button>
    <div id="slide_div" style="display: none;">
        <!-- 滑动效果slideDown()、slideUp()、slideToggle() -->
        <p class="slide_p">
            <a href="https://zhidao.baidu.com/question/560896487163685204.html" target="blank">
                滑动效果slideDown()、slideUp()、slideToggle()</a>
        </p>
        <p class="slide_p">滑动效果slideDown()、slideUp()、slideToggle()</p>
        <p class="slide_p">滑动效果slideDown()、slideUp()、slideToggle()</p>
    </div>

</body>

</html>